<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Cache",
  inject: ["getNode"],

  data() {
    return {
      height: 128,
      width: 64,
      title: "Cache",
      text: "缓存"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>

<template>
  <div class="c-cache" :style="nodeStyle">
    <svg
      t="1731205357897"
      class="c-cache__svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="34465"
    >
      <path
        d="M512 504.32c-209.92 0-381.44-87.04-384-195.84v426.24c0 98.56 171.52 179.2 384 179.2s384-80.64 384-179.2V305.92c0 110.08-171.52 198.4-384 198.4zM512 107.52c-212.48 0-384 83.2-384 184.32v10.24c2.56-106.24 174.08-194.56 384-194.56zM512 107.52c212.48 0 384 89.6 384 198.4v-7.68-5.12c0-102.4-171.52-185.6-384-185.6z"
        fill="#EEEEEE"
        p-id="34466"
      ></path>
      <path
        d="M128 305.92v2.56-5.12 2.56zM512 107.52c-209.92 0-381.44 87.04-384 195.84v5.12c2.56 108.8 174.08 195.84 384 195.84 212.48 0 384-88.32 384-198.4S724.48 107.52 512 107.52z"
        fill="#FFFFFF"
        p-id="34467"
      ></path>
      <path
        d="M921.6 307.2c-1.28-10.24-2.56-20.48-5.12-30.72-14.08-51.2-56.32-96-124.16-131.84C712.96 103.68 620.8 81.92 512 81.92S311.04 102.4 231.68 144.64c-67.84 35.84-110.08 80.64-124.16 131.84-2.56 10.24-3.84 20.48-5.12 30.72v401.92c0 7.68 0 14.08 1.28 21.76 3.84 25.6 15.36 51.2 34.56 74.24 21.76 26.88 52.48 51.2 90.88 71.68 79.36 42.24 172.8 62.72 284.16 62.72s204.8-20.48 284.16-62.72c38.4-20.48 69.12-44.8 90.88-71.68 19.2-23.04 29.44-48.64 34.56-74.24-1.28-6.4-1.28-14.08-1.28-21.76v-396.8-5.12zM512 107.52c207.36 0 375.04 89.6 384 202.24-3.84 107.52-174.08 194.56-384 194.56-208.64 0-378.88-85.76-384-193.28 7.68-112.64 176.64-203.52 384-203.52z m384 601.6c0 112.64-171.52 204.8-384 204.8s-384-92.16-384-204.8v-35.84c85.76 83.2 225.28 138.24 384 138.24 157.44 0 298.24-53.76 384-138.24v35.84z m0-52.48c-16.64 16.64-34.56 32-56.32 47.36-10.24 6.4-20.48 14.08-30.72 20.48-84.48 49.92-183.04 75.52-296.96 75.52s-212.48-25.6-296.96-75.52c-10.24-6.4-20.48-12.8-30.72-20.48-21.76-15.36-39.68-30.72-56.32-47.36V522.24c78.08 89.6 221.44 148.48 384 148.48s305.92-60.16 384-148.48v134.4z m-74.24-85.76c-6.4 5.12-14.08 8.96-20.48 12.8-80.64 49.92-177.92 74.24-289.28 74.24s-207.36-24.32-289.28-74.24c-6.4-3.84-14.08-8.96-20.48-12.8-30.72-20.48-55.04-43.52-74.24-66.56V362.24c17.92 35.84 52.48 69.12 106.24 96 76.8 39.68 168.96 60.16 277.76 60.16s200.96-19.2 277.76-60.16c53.76-28.16 89.6-60.16 106.24-96v142.08c-19.2 23.04-44.8 46.08-74.24 66.56z"
        fill="#8F959E"
        p-id="34468"
      ></path>
      <path
        d="M768 555.52l51.2-38.4v-25.6l-51.2 38.4zM768 709.12l51.2-38.4v-25.6l-51.2 38.4zM819.2 773.12l-51.2 38.4v25.6l51.2-38.4z"
        fill="#8F959E"
        p-id="34469"
      ></path>
      <path
        d="M238.08 275.2c-1.28-3.84 1.28-5.12 3.84-6.4 10.24-3.84 19.2-7.68 29.44-11.52 19.2-7.68 38.4-14.08 56.32-21.76 11.52-5.12 21.76-5.12 33.28 0 16.64 6.4 33.28 12.8 48.64 19.2 10.24 3.84 20.48 7.68 30.72 12.8 2.56 1.28 3.84 3.84 3.84 6.4 0 6.4 1.28 12.8-1.28 19.2-2.56-2.56-1.28-5.12-1.28-7.68v-8.96c-6.4 2.56-11.52 5.12-16.64 7.68-19.2 7.68-37.12 15.36-56.32 24.32-6.4 2.56-12.8 6.4-19.2 8.96-7.68 2.56-14.08 2.56-21.76 0-14.08-6.4-28.16-11.52-42.24-17.92-12.8-5.12-25.6-11.52-39.68-16.64-2.56-2.56-5.12-3.84-7.68-7.68z"
        fill="#EB0002"
        p-id="34470"
      ></path>
      <path
        d="M238.08 275.2c12.8 7.68 26.88 12.8 40.96 19.2 16.64 7.68 34.56 14.08 51.2 21.76 8.96 3.84 16.64 1.28 25.6-2.56 11.52-6.4 23.04-10.24 34.56-15.36 14.08-6.4 28.16-11.52 42.24-19.2 3.84-1.28 7.68-3.84 11.52-6.4v19.2c-2.56 2.56-5.12 5.12-7.68 5.12-1.28 2.56-3.84 3.84-7.68 5.12-21.76 8.96-42.24 17.92-62.72 26.88-3.84 1.28-8.96 3.84-12.8 6.4-7.68 3.84-16.64 3.84-24.32 0-8.96-5.12-19.2-7.68-29.44-12.8-16.64-6.4-33.28-12.8-48.64-20.48-1.28 0-2.56-1.28-3.84-2.56-7.68-2.56-8.96-10.24-7.68-16.64-1.28-1.28-1.28-3.84-1.28-7.68z"
        fill="#B20000"
        p-id="34471"
      ></path>
      <path
        d="M245.76 336.64c-6.4-2.56-8.96-6.4-7.68-12.8v-12.8c6.4 2.56 12.8 6.4 19.2 8.96 10.24 3.84 20.48 7.68 29.44 12.8 14.08 6.4 28.16 11.52 42.24 17.92 7.68 3.84 14.08 3.84 21.76 0 15.36-7.68 30.72-14.08 46.08-20.48 11.52-5.12 23.04-10.24 35.84-15.36 2.56-1.28 5.12-2.56 7.68-5.12 2.56-1.28 3.84-1.28 3.84 2.56v16.64c-1.28 2.56-3.84 3.84-6.4 5.12-1.28 2.56-3.84 3.84-6.4 5.12l-53.76 23.04c-7.68 3.84-15.36 6.4-23.04 11.52-8.96 5.12-17.92 5.12-26.88 0L281.6 354.56c-10.24-3.84-20.48-7.68-30.72-12.8l-5.12-5.12z"
        fill="#B20000"
        p-id="34472"
      ></path>
      <path
        d="M444.16 360.96c-1.28 2.56-3.84 5.12-6.4 6.4-11.52 5.12-21.76 10.24-33.28 15.36-17.92 7.68-35.84 15.36-52.48 23.04-7.68 3.84-14.08 2.56-21.76 0-14.08-6.4-28.16-11.52-42.24-17.92-14.08-6.4-28.16-11.52-42.24-17.92-5.12-2.56-6.4-5.12-6.4-10.24V345.6h2.56c12.8 7.68 26.88 12.8 40.96 17.92 16.64 6.4 34.56 14.08 51.2 21.76 5.12 2.56 10.24 2.56 14.08 0 19.2-7.68 38.4-16.64 56.32-24.32 8.96-3.84 17.92-7.68 28.16-12.8 3.84-1.28 6.4-3.84 10.24-5.12 2.56-1.28 2.56-1.28 2.56 1.28-1.28 6.4-1.28 11.52-1.28 16.64z"
        fill="#B20000"
        p-id="34473"
      ></path>
      <path
        d="M444.16 327.68v-16.64c0-2.56 0-2.56-2.56-1.28-8.96 6.4-17.92 8.96-28.16 12.8L371.2 341.76c-7.68 3.84-15.36 6.4-23.04 10.24-6.4 2.56-11.52 2.56-17.92 0-11.52-5.12-23.04-10.24-34.56-14.08-14.08-6.4-28.16-11.52-42.24-17.92-5.12-2.56-10.24-3.84-15.36-8.96-1.28-2.56 1.28-5.12 3.84-6.4 1.28-1.28 3.84 0 5.12-2.56 16.64 6.4 33.28 12.8 48.64 20.48 10.24 5.12 21.76 7.68 32 12.8 7.68 3.84 15.36 5.12 24.32 1.28 3.84-1.28 7.68-3.84 11.52-5.12 10.24-5.12 21.76-8.96 32-14.08 14.08-6.4 29.44-11.52 43.52-19.2 1.28 2.56 3.84 2.56 5.12 3.84 2.56 1.28 3.84 2.56 2.56 5.12-2.56 6.4-1.28 14.08-2.56 20.48z"
        fill="#EB0002"
        p-id="34474"
      ></path>
      <path
        d="M444.16 360.96v-19.2c-11.52 7.68-23.04 11.52-33.28 16.64-16.64 7.68-32 14.08-48.64 20.48-5.12 2.56-8.96 5.12-14.08 6.4-6.4 2.56-11.52 2.56-16.64 0-19.2-7.68-37.12-16.64-56.32-23.04-10.24-3.84-20.48-8.96-30.72-14.08-1.28-1.28-2.56-2.56-5.12-3.84-1.28-2.56 0-5.12 3.84-6.4 1.28 0 2.56-1.28 3.84-2.56l53.76 23.04c10.24 5.12 21.76 8.96 32 12.8 6.4 2.56 12.8 2.56 19.2 0 16.64-7.68 33.28-15.36 49.92-21.76l34.56-15.36c1.28 0 1.28-1.28 2.56-1.28v1.28c6.4 1.28 7.68 6.4 6.4 11.52-1.28 6.4 0 11.52-1.28 15.36z"
        fill="#EB0001"
        p-id="34475"
      ></path>
      <path
        d="M299.52 282.88c-6.4 0-14.08-1.28-19.2-3.84-2.56-1.28-6.4-2.56-6.4-6.4s2.56-5.12 5.12-6.4c14.08-5.12 26.88-5.12 40.96 0 2.56 1.28 5.12 2.56 5.12 6.4 0 2.56-2.56 5.12-5.12 5.12-6.4 3.84-14.08 5.12-20.48 5.12z"
        fill="#FEFDFD"
        p-id="34476"
      ></path>
      <path
        d="M312.32 290.56l42.24-7.68c1.28 0 2.56-1.28 3.84 0 0 1.28-1.28 2.56-1.28 2.56-3.84 5.12-6.4 10.24-10.24 15.36-1.28 1.28-1.28 2.56-3.84 1.28-8.96-2.56-20.48-7.68-30.72-11.52zM345.6 268.8c-3.84-10.24-12.8-11.52-21.76-11.52H320c2.56-2.56 6.4-2.56 8.96-3.84 5.12-1.28 6.4-1.28 2.56-6.4 0-1.28-1.28-1.28-1.28-3.84 8.96 5.12 17.92 7.68 25.6 0v1.28c-2.56 7.68-2.56 7.68 5.12 10.24 1.28 0 2.56 1.28 3.84 2.56-3.84 0-7.68 1.28-11.52 1.28-3.84 0-5.12 1.28-6.4 5.12 1.28 1.28 1.28 2.56-1.28 5.12z"
        fill="#FEFCFC"
        p-id="34477"
      ></path>
      <path
        d="M392.96 281.6c-3.84 1.28-6.4 2.56-10.24 0-7.68-3.84-15.36-6.4-23.04-8.96 2.56-2.56 3.84-2.56 6.4-3.84 7.68-2.56 14.08-5.12 21.76-8.96 1.28 0 2.56-1.28 3.84 0 0 7.68-1.28 15.36 1.28 21.76z"
        fill="#BC0000"
        p-id="34478"
      ></path>
      <path
        d="M392.96 281.6c-1.28 0-2.56 0-2.56-2.56v-16.64c0-1.28 0-1.28 1.28-2.56 8.96 3.84 16.64 6.4 25.6 10.24-8.96 5.12-16.64 7.68-24.32 11.52z"
        fill="#850000"
        p-id="34479"
      ></path>
      <path
        d="M753.92 279.04c11.52 0 19.2 3.84 25.6 8.96 2.56 2.56 3.84 7.68 1.28 11.52s-6.4 3.84-10.24 2.56c-1.28 0-2.56-1.28-3.84-2.56-5.12-3.84-11.52-3.84-16.64-2.56-2.56 1.28-5.12 2.56-5.12 5.12s2.56 3.84 5.12 3.84c6.4 1.28 12.8 2.56 19.2 5.12 11.52 3.84 17.92 11.52 16.64 21.76 0 8.96-5.12 14.08-12.8 19.2-14.08 7.68-28.16 5.12-40.96-2.56-1.28-1.28-2.56-1.28-3.84-2.56-3.84-2.56-5.12-7.68-2.56-11.52 2.56-3.84 7.68-5.12 11.52-1.28 3.84 2.56 7.68 5.12 11.52 6.4 5.12 1.28 10.24 1.28 15.36-1.28 2.56-1.28 3.84-2.56 3.84-5.12s-2.56-3.84-3.84-5.12c-5.12-2.56-10.24-3.84-15.36-5.12-7.68-1.28-15.36-5.12-19.2-11.52-7.68-11.52-1.28-23.04 7.68-28.16 6.4-2.56 12.8-5.12 16.64-5.12zM506.88 288c6.4-5.12 14.08-7.68 21.76-7.68 3.84 0 7.68 2.56 8.96 6.4 0 3.84-1.28 7.68-6.4 8.96-1.28 0-3.84 1.28-5.12 1.28-11.52 1.28-19.2 10.24-19.2 21.76v28.16c0 5.12-3.84 10.24-8.96 10.24-5.12 0-8.96-3.84-8.96-10.24v-57.6c0-5.12 2.56-8.96 6.4-10.24 3.84-1.28 7.68 1.28 10.24 6.4 1.28 1.28 1.28 1.28 1.28 2.56zM700.16 317.44v-28.16c0-6.4 3.84-10.24 8.96-10.24 5.12 0 8.96 3.84 8.96 10.24v58.88c0 6.4-3.84 10.24-8.96 10.24-5.12 0-7.68-3.84-7.68-8.96-1.28-11.52-1.28-21.76-1.28-32z"
        fill="#636466"
        p-id="34480"
      ></path>
      <path
        d="M700.16 258.56c0-6.4 2.56-10.24 8.96-10.24 5.12 0 7.68 3.84 7.68 10.24s-2.56 10.24-8.96 10.24c-5.12 0-7.68-3.84-7.68-10.24z"
        fill="#656567"
        p-id="34481"
      ></path>
      <path
        d="M687.36 257.28c0-6.4-2.56-8.96-7.68-8.96-5.12 0-8.96 3.84-8.96 10.24v26.88c-2.56-1.28-3.84-1.28-5.12-2.56-6.4-3.84-14.08-5.12-21.76-2.56-17.92 3.84-29.44 17.92-30.72 35.84-1.28 20.48 14.08 39.68 34.56 40.96 7.68 1.28 15.36-1.28 21.76-5.12 1.28-1.28 2.56-1.28 3.84 1.28 2.56 3.84 5.12 5.12 10.24 3.84 3.84-1.28 6.4-5.12 6.4-8.96-2.56-30.72-2.56-60.16-2.56-90.88z m-37.12 83.2c-11.52 0-21.76-10.24-21.76-21.76s8.96-21.76 20.48-21.76c11.52 0 20.48 10.24 20.48 21.76 1.28 11.52-8.96 21.76-19.2 21.76zM555.52 323.84h43.52c7.68 0 10.24-2.56 8.96-10.24-1.28-12.8-7.68-24.32-19.2-30.72-12.8-6.4-26.88-6.4-38.4 2.56-20.48 14.08-23.04 42.24-5.12 60.16 15.36 15.36 39.68 14.08 53.76 1.28 2.56-2.56 3.84-6.4 0-8.96-2.56-3.84-6.4-3.84-10.24-1.28-2.56 2.56-6.4 3.84-10.24 3.84-10.24 2.56-23.04-2.56-26.88-11.52-1.28-3.84-1.28-5.12 3.84-5.12z m-3.84-16.64c6.4-12.8 21.76-17.92 35.84-6.4 2.56 2.56 7.68 5.12 6.4 8.96-1.28 2.56-6.4 1.28-8.96 1.28h-29.44c-5.12 0-6.4-1.28-3.84-3.84z"
        fill="#636466"
        p-id="34482"
      ></path>
    </svg>
    <div class="c-cache__content">
      <div class="c-cache__content__title">{{ title }}</div>
      <div class="c-cache__content__text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.c-cache {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f95ff;
  background-color: rgba(95, 149, 255, 0.05);
  &__svg {
    max-width: 64px;
    max-height: 64px;
  }
  &__content {
    flex: 1;
    &__title {
      font-size: 16px;
      color: #0e1215;
      font-weight: 600;
    }
    &__text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}
</style>
